<script setup lang="ts">
//
</script>

<template>
  <view class="panel brands">
    <view class="title">
      热门品牌
      <navigator hover-class="none" class="more" url="/pages/list/index">更多</navigator>
    </view>
    <view class="cards">
      <navigator class="cards-item" hover-class="none" url="/pages/goods/index">
        <image
          class="image"
          mode="aspectFit"
          src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/brand_logo_1.jpg"
        ></image>
        <view class="name">小米</view>
        <view class="price">99元起</view>
      </navigator>
      <navigator class="cards-item" hover-class="none" url="/pages/goods/index">
        <image
          class="image"
          mode="aspectFit"
          src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/brand_logo_2.jpg"
        ></image>
        <view class="name">TCL</view>
        <view class="price">199起</view>
      </navigator>
      <navigator class="cards-item" hover-class="none" url="/pages/goods/index">
        <image
          class="image"
          mode="aspectFit"
          src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/brand_logo_3.jpg"
        ></image>
        <view class="name">饭小宝</view>
        <view class="price">9.9起</view>
      </navigator>
      <navigator class="cards-item" hover-class="none" url="/pages/goods/index">
        <image
          class="image"
          mode="aspectFit"
          src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/brand_logo_4.jpg"
        ></image>
        <view class="name">鳄鱼</view>
        <view class="price">299起</view>
      </navigator>
    </view>
  </view>
</template>

<style lang="scss">
/* 热门品牌 */
.brands {
  .cards-item {
    width: 178rpx;
    padding: 15rpx 20rpx 20rpx;
    line-height: 1;
    text-align: center;
  }
  .image {
    width: 126rpx;
    height: 126rpx;
  }
  .name {
    margin: 20rpx 0 16rpx;
    font-size: 24rpx;
    color: #262626;
  }
  .price {
    font-size: 24rpx;
    color: #999;
  }
}
</style>
